<template>
    <div class="tab-bar">
        <router-link to="/home" class="tab-bar-item">
          <div class="icon"><i class="iconfont icon-shouye"></i></div>
          <div class="text">首页</div>
        </router-link>

          <router-link to="/category" class="tab-bar-item">
            <div class="icon"><i class="iconfont icon-leimupinleifenleileibie"></i></div>
            <div class="text">分类</div>
          </router-link>
          <router-link to="/shopCart" class="tab-bar-item">

                <div class="cart-item">
                  <div class="cart-count">{{ cart.count }}</div>
                  <div class="icon"><i class="iconfont icon-gouwuche"></i></div>
                  <div class="text">购物车</div>
                </div>
            
          </router-link>
          <router-link to="/profile" class="tab-bar-item">
            <div class="icon"><i class="iconfont icon-wode"></i></div>
            <div class="text">首页</div>
          </router-link>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "TabBar",
  computed:{
    ...mapState({
      cart:'cart'
    })
  }
}
</script>

<style scoped lang="css">
   .tab-bar{
     position: fixed;
     bottom: 0;
     right: 0;
     left: 0;
     /*height: 50px;*/
     background-color: #eee;
     width: 100%;
     display: flex;
     z-index: 9;
     align-items: center;
     text-align: center;
     border: none;
   }
   .router-link-exact-active {
     text-decoration: none;
     color: #42bBaa;
   }
   /*.tab-bar.router-link-active{*/
   /*  color: #42bBaa;*/
   /*}*/
   .tab-bar-item{
     flex: 1;
     /*padding: 3px;*/
   }
   .icon{
     height: 24px;
     width: 24px;
     /*padding: 3px;*/
     vertical-align: middle;
     display: inline-block;

   }
   .icon i{
     width: 100%;
     height: 100%;
     font-size: 25px;
   }
   .text{
     font-size: 14px;
     /*color: #666;*/
     /*padding: 5px;*/
   }
   .child {
     width: 100%;
     background: #f2f3f5;
     border-radius: 4px;
   }
   .van-badge--fixed{
     position: absolute;
     top: 11px !important;
     right: 0;
   }
   .cart-item{
     width: 100%;
     height: 100%;
     position: relative;
   }
   .cart-count{
     position: absolute;
     right: 10px;
     height: 20px;
     width: 20px;
     color: #fff;
     font-size: 14px;
     border-radius: 50%;
     line-height: 20px;
     text-align: center;
     background-color: red;
     
   }



</style>